<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Ping Pong Loading Animation</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
<body>
<svg class="ping-pong" viewBox="0 0 128 128" width="128px" height="128px">
<defs>
<linearGradient id="ping-pong-grad" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#000" />
<stop offset="100%" stop-color="#fff" />
</linearGradient>
<mask id="ping-pong-mask">
<rect
x="0"
y="0"
width="128"
height="128"
fill="url(#ping-pong-grad)"
/>
</mask>
</defs>
<g fill="var(--primary)">
<g class="ping-pong__ball-x">
<circle class="ping-pong__ball-y" r="10" />
</g>
<g class="ping-pong__paddle-x">
<rect
class="ping-pong__paddle-y"
x="-30"
y="-2"
rx="1"
ry="1"
width="60"
height="4"
/>
</g>
</g>
<g fill="hsl(163,90%,40%)" mask="url(#ping-pong-mask)">
<g class="ping-pong__ball-x">
<circle class="ping-pong__ball-y" r="10" />
</g>
<g class="ping-pong__paddle-x">
<rect
class="ping-pong__paddle-y"
x="-30"
y="-2"
rx="1"
ry="1"
width="60"
height="4"
/>
</g>
</g>
</svg>
</body>
</html>